<template>
  <view class="dy-scroll-container">
    <dy-navbar title="图片裁剪" />
    <scroll-view class="dy-scroll" scroll-y>
      <dy-card>
        <dy-section slot="title">基础用法</dy-section>
        <template slot="body">
          <dy-img-cropper :custom-style="cropper" :src="src" @cropped="handleCropped" />
          <view class="dy-mg-top-32">
            <text>裁剪结果：</text>
            <dy-img :src="cropImg" :custom-style="cropSize" />
          </view>
        </template>
      </dy-card>
      <dy-card>
        <dy-section slot="title">指定裁剪大小:100px*100px</dy-section>
        <template slot="body">
          <dy-img-cropper
            :keep-crop-ratio="true"
            :custom-style="cropper"
            :crop-size="customCropSize"
            :src="src"
            @cropped="handleCropped1"
          />
          <view class="dy-mg-top-32">
            <text>裁剪结果：</text>
            <dy-img :src="cropImg1" :custom-style="customCropSize" />
          </view>
        </template>
      </dy-card>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'Img',
  data() {
    return {
      src: require('../../../../static/img/271bea8f-aece-4265-a2c7-565cf6e863be.png'),
      result: null,
      result1: null,
      customCropSize: { width: '100px', height: '100px' }
    }
  },
  computed: {
    cropper() {
      return {
        width: '100%',
        height: '400rpx'
      }
    },
    cropSize() {
      const { width = 0, height = 0 } = this.result || {}
      return {
        width: `${width}px`,
        height: `${height}px`
      }
    },
    cropImg() {
      return (this.result && this.result.img) || ''
    },
    cropImg1() {
      return (this.result1 && this.result1.img) || ''
    }
  },
  methods: {
    handleCropped(res) {
      this.result = res
    },
    handleCropped1(res) {
      this.result1 = res
    }
  }
}
</script>
